<template>
  <div class="exampleitem-top">
    <NavHeader />
    <div class="exampleitem-top-content">
      <h1>HR考勤数据汇总，智能管理新体验</h1>
      <h3>实时同步、精准统计，助力企业高效考勤管理</h3>
    </div>
  </div>
  <div class="exampleitem-center">
    <div class="exampleitem-center-item2">
      <div class="exampleitem-center-item2-title">系统优势</div>
      <div class="exampleitem-center-item2-content">
        <div
          class="exampleitem-center-item2-content-item"
          v-for="(item, index) in list4"
        >
          <div class="exampleitem-center-item2-content-item-img">
            <img :src="item.img" alt="" />
          </div>
          <h3>{{ item.title }}</h3>
          <p>{{ item.desc }}</p>
        </div>
      </div>
    </div>
    <div class="exampleitem-center-item1">
      <h1>系统大数据架构图</h1>
      <div class="exampleitem-center-item1-content">
        <div class="exampleitem-center-item1-content-left">功能模块</div>
        <div class="exampleitem-center-item1-content-right">
          <div
            class="exampleitem-center-item1-content-right-item"
            v-for="(item, index) in list"
          >
            <h2>{{ item.title }}</h2>
            <div
              class="exampleitem-center-item1-content-right-item-desc"
              v-for="(ele, i) in item.descs"
            >
              {{ ele }}
            </div>
          </div>
        </div>
        <div class="exampleitem-center-item1-content-left">数据仓库</div>
        <div class="exampleitem-center-item1-content-right">
          <div
            class="exampleitem-center-item1-content-right-item"
            v-for="(item, index) in list2"
            style="padding: 7px 7px 20px 7px"
          >
            <h2>{{ item.title }}</h2>
            <div
              class="exampleitem-center-item1-content-right-item-desc"
              v-for="(ele, i) in item.descs"
              style="
                padding: 5px 10px;
                height: 80%;
                display: flex;
                align-items: center;
              "
            >
              {{ ele }}
            </div>
          </div>
        </div>
        <div class="exampleitem-center-item1-content-left">数据来源</div>
        <div class="exampleitem-center-item1-content-right">
          <div
            class="exampleitem-center-item1-content-right-item"
            v-for="(item, index) in list3"
          >
            <h2 style="font-weight: 400; font-size: 16px">{{ item.title }}</h2>
            <!-- <div
              class="exampleitem-center-item1-content-right-item-desc"
              v-for="(ele, i) in item.descs"
              style="padding: 5px 10px"
            >
              {{ ele }}
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="exampleitem-center-item3">
      <h1>常见问题解决方案</h1>
    </div> -->
  </div>
  <Recommend />
  <pageBottom />
  <BackTop />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import NavHeader from "@/components/NavHeader.vue";
import pageBottom from "@/components/pageBottom.vue";
import BackTop from "@/components/BackTop.vue";
import Recommend from "@/components/Recommend.vue";
import ddtb from "@/assets/img/Exampleitem5/ddtb.png";
import sstb from "@/assets/img/Exampleitem5/sstb.png";
import gxsp from "@/assets/img/Exampleitem5/gxsp.png";
import lhpz from "@/assets/img/Exampleitem5/lhpz.png";
import znjk from "@/assets/img/Exampleitem5/znjk.png";
let list = reactive([
  {
    title: "员工管理",
    descs: ["花名册", "个人档案"],
  },
  {
    title: "审批任务",
    descs: ["待审批", "已审批", "站内信"],
  },
  {
    title: "假勤管理",
    descs: ["考勤管理", "假期管理", "异常监控"],
  },
  {
    title: "系统管理",
    descs: [
      "用户管理",
      "角色管理",
      "菜单管理",
      "部门管理",
      "通知公告",
      "日志管理",
    ],
  },
  {
    title: "系统监控与工具",
    descs: ["在线用户", "定时任务", "数据监控与服务监控", "表单构建与代码生成"],
  },
  {
    title: "移动端体验",
    descs: ["企业微信集成", "消息提醒"],
  },
]);
let list2 = reactive([
  {
    title: "集中存储",
    descs: [
      "所有考勤、审批和假勤数据集中存储于安全的数据仓库中，便于统一管理和分析",
    ],
  },
  {
    title: "实时更新",
    descs: ["数据仓库支持实时数据更新，确保系统中的信息始终最新"],
  },
  {
    title: "数据备份",
    descs: ["定期进行数据备份，保障数据安全性和可恢复性"],
  },
  {
    title: "数据加密",
    descs: ["采用先进的加密技术，确保数据在存储和传输过程中的安全性"],
  },
  {
    title: "数据审计",
    descs: ["支持数据审计功能，记录数据的访问和修改历史，便于追溯和监控"],
  },
  {
    title: "数据可视化",
    descs: ["提供数据可视化工具，帮助管理者快速理解和分析数据"],
  },
]);
let list3 = reactive([
  {
    title: "企业微信集成",
    descs: ["通过企业微信应用，实时同步员工信息和考勤数据"],
  },
  {
    title: "HR系统同步",
    descs: ["与HR系统无缝对接，同步员工档案、组织架构和岗位信息"],
  },
  {
    title: "手动录入",
    descs: ["支持管理员手动录入或修改数据，确保数据的灵活性和完整性"],
  },
  {
    title: "外部数据导入",
    descs: ["支持从外部系统（如薪酬系统）导入数据，丰富数据来源"],
  },
  {
    title: "API接口",
    descs: [
      "提供API接口，支持与其他企业系统（如财务系统、项目管理系统）的数据交互",
    ],
  },
  {
    title: "第三方服务集成",
    descs: [
      "支持与第三方考勤设备（如指纹机、人脸识别设备）集成，自动同步考勤数据",
    ],
  },
]);
let list4 = reactive([
  {
    img: ddtb,
    title: "多端支持",
    desc: "支持电脑端和企业微信移动端操作，满足不同场景需求",
  },
  {
    img: sstb,
    title: "实时同步",
    desc: "考勤和审批数据实时同步，确保信息准确无误",
  },
  {
    img: gxsp,
    title: "高效审批",
    desc: "简化审批流程，支持批量操作和备注功能，提升管理效率",
  },
  {
    img: lhpz,
    title: "灵活配置",
    desc: "支持考勤规则、假期配置和权限管理，满足企业个性化需求",
  },
  {
    img: znjk,
    title: "智能监控",
    desc: "支持考勤规则、假期配置和权限管理，满足企业个性化需求",
  },
]);
</script>

<style lang="scss" scoped>
.exampleitem-top {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("@/assets/img/exampleitem5/bg.png");
  height: 100vh;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4784313725);
  }
  &-content {
    position: absolute;
    margin-left: 18%;
    top: 50%;
    h1 {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 35px;
    }
  }
}
.exampleitem-center {
  color: #000;
  background-color: #fff;
  padding-bottom: 100px;
  &-item1 {
    width: 100%;
    text-align: center;
    padding: 70px 0;
    // background-color: #f3f3f6;

    &-content {
      width: 80%;
      margin: auto;
      // background-color: #fff;
      display: flex;
      justify-content: space-between;
      padding: 50px 70px;
      flex-wrap: wrap;
      &-left {
        width: 10%;
        background-image: linear-gradient(to right, #51b4dd, #068be1);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 15px;
      }
      &-right {
        border: 1px solid #c5ddfb;
        background-color: #f6f9ff;
        border-radius: 4px;
        width: 89%;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;

        &-item {
          width: 16%;
          background-color: #fff;
          border: 1px solid #c5ddfb;
          border-radius: 4px;
          padding: 7px;
          h2 {
            font-size: 17px;
            font-weight: 600;
          }
          &-desc {
            background-color: #e3f0ff;
            border: 1px solid #c5ddfb;
            border-radius: 4px;
            margin: 7px 0;
            padding: 2px;
          }
        }
      }
    }
  }
  &-item2 {
    width: 100%;
    text-align: center;
    padding: 70px 0;
    &-title {
      margin-bottom: 50px;
      width: 100%;
      height: 60px;
      background-image: url("@/assets/img/exampleitem/tle.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      font-size: 33px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-align: center;
      line-height: 60px;
    }
    &-content {
      width: 70%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 19%;
        height: 250px;
        margin: 0 10px 0 10px;
        padding: 40px 25px;
        box-sizing: border-box;
        background: #ffffff;
        box-shadow: 0px 4px 14px 0px rgba(204, 213, 222, 0.5);
        border-radius: 4px;
        &-img {
          height: 36px;
          width: 36px;
          display: flex;
          align-items: center;
          img {
            width: 100%;
          }
        }
        h3 {
          margin: 24px 0 16px 0;
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 28px;
        }
        p {
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 22px;
        }
      }
    }
  }
}
</style>
